<!DOCTYPE html>
<html>
<head>
    <title>收费项目登记</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/jquery.sorted.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
    <script type="text/javascript">
        $(function () {
            $('#newNav').click(function(){
                window.location.href="charge-edit1.html";
            });
        });

        function checkall(){
            var alls=document.getElementsByName("check");
            var ch=document.getElementById("checkall");
            if(ch.checked){
                for(var i=0;i<alls.length;i++){
                    alls[i].checked=true;
                }
            }else{
                for(var i=0;i<alls.length;i++){
                    alls[i].checked=false;
                }
            }
        }
        function delAll(){
            var alls=document.getElementsByName("check");
            var ids=new Array();
            for(var i=0;i<alls.length;i++){
                if(alls[i].checked){
                    ids.push(alls[i].value);
                }
            }
            if(ids.length>0){
                if(confirm("确认操作?")){
                    alert("成功!");
                }
            }else{
                alert("请选中要操作的项");
            }
        }
        $(function () {
            $('#backid').click(function(){
                window.location.href="dispensing.html";
            });
        });
    </script>
</head>
<body>

<form action="charge.html" method="post" class="definewidth m20">
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td width="10%" class="tableleft">收费项目名称：</td>
            <td width="10%"><input type="text" name="chargeName" value=""/></td>

            <td>
                <button onclick="loadData()" class="btn btn-primary" type="button">查询</button>
                <button class="btn btn-primary" type="reset">清空</button> </td>
        </tr>

    </table>


</form>
<table class="table table-bordered table-hover definewidth m10" >
    <thead>
    <tr>
        <th>编号</th>
        <th>收费项目名称</th>
        <th>收费金额</th>
        <th>创建日期</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="tboby">
    <tr >
        <td style="vertical-align:middle;">1103</td>
        <td style="vertical-align:middle;">心脏检查</td>
        <td style="vertical-align:middle;">200</td>
        <td style="vertical-align:middle;">2015-01-04 10:34</td>
        <td style="vertical-align:middle;">
            <a href="charge-edit1.html">修改</a>
            <a href="">删除</a>
            <a href="charge-edit1.html">查看详情</a>
        </td>
    </tr>
    </tbody>
</table>

<table class="table table-bordered table-hover definewidth m10" >
    <tr>
        <th colspan="5">
            <div class="inline pull-right page">
                <a name="" id="firstPage" onclick="A()" >第一页</a>
                <a name="" id="prePage" onclick="B()">上一页</a>
                <span id="currentPage"></span>
                <a name="" id="nextPage" onclick="C()" >下一页</a>
                <a name="" id="lastPage" onclick="D()" >最后一页</a>
                &nbsp;&nbsp;&nbsp;共<span id="total" class='current'></span>条记录
                <span id="pageNum"></span>/<span id="pages"></span>页
                <span id="pageSize" class="hidden"></span>
            </div>
        </th>
    </tr>
</table>

</body>
</html>
<script>
    $(function () {
        loadData();
    })

    function A () {
        if ($("#firstPage").attr("class")=="btn btn-small disabled"){
            return;
        }
        let num=$("#firstPage").attr("name");
        $("#pageNum").html(num);
        loadData();
    };
    function B() {
        if ($("#prePage").attr("class")=="btn btn-small disabled"){
            return;
        }
        let num=$("#prePage").attr("name");
        $("#pageNum").html(num);
        loadData();
    };
    function C () {
        if ($("#nextPage").attr("class")=="btn btn-small disabled"){
            return;
        }
        let num=$("#nextPage").attr("name");
        $("#pageNum").html(num);
        loadData();
    };
    function D () {
        if ($("#lastPage").attr("class")=="btn btn-small disabled"){
            return;
        }
        let num=$("#lastPage").attr("name");
        $("#pageNum").html(num);
        loadData();
    };
    function E (j) {
        $("#pageNum").html(j);
        loadData();
    };
    function fillPageData(pageInfo) {
        //填充信息
        $("#total").html(pageInfo.total);
        $("#pages").html(pageInfo.pages);
        $("#pageNum").html(pageInfo.pageNum);
        $("#pageSize").html(pageInfo.pageSize);
        let str="";
        for(let i=1;i<=pageInfo.pages;i++){
            str+='<a onclick=E('+i+')>'+i+'</a>';
        }
        $("#currentPage").html(str);

        //设置按钮的属性值和样式
        $("#firstPage").attr("name",1);
        $("#prePage").attr("name",pageInfo.prePage);
        $("#nextPage").attr("name",pageInfo.nextPage);
        $("#lastPage").attr("name",pageInfo.pages);
        $("#firstPage").removeClass("btn btn-small disabled");
        $("#prePage").removeClass("btn btn-small disabled");
        $("#nextPage").removeClass("btn btn-small disabled");
        $("#lastPage").removeClass("btn btn-small disabled");
        if(pageInfo.isFirstPage){//如果是第一页：上一页和首页禁用
            $("#firstPage").addClass("btn btn-small disabled");
            $("#prePage").addClass("btn btn-small disabled");
            $("#current1").addClass("btn btn-small disabled");
        }
        if(pageInfo.isLastPage){//如果已经是最后一页：下一页和末页禁用
            $("#nextPage").addClass("btn btn-small disabled");
            $("#lastPage").addClass("btn btn-small disabled");
        }
    }
    function info(id) {
        window.location.href="charge-show.html?id="+id;
    }
    function update(id){
        window.location.href="charge-ediit1.html?id="+id;
    }
    function del(id) {
        if(confirm("确定要删除吗?")) {
            //发起异步请求
            $.ajax({
                type: "GET",
                url: "/charge/updateIsDel?id="+id, //RESTful风格的API定义
                success: function (vo) {
                    if(vo.code==200){
                        alert(vo.msg);
                        loadData();
                    }else{
                        alert(vo.msg);
                    }
                }
            });
        }
    }
    //加载数据
    function loadData(){
        let pageNum=$("#pageNum").html();
        let pageSize=$("#pageSize").html();
        $.ajax({
            type: "GET",
            url: "/charge/list",
            data:  "chargeName="+$("input[name='chargeName']").val()+"&pageNum="+pageNum+"&pageSize="+pageSize,
            dataType:"json",
            success: function(vo){
                //alert( "Data Saved: " + vo );
                let list=vo.pageInfo.list;
                let str="";
                for(let i=0;i<list.length;i++){
                    let obj=list[i];
                    let id=obj.id;
                    let chargeName=obj.chargeName;
                    let chargeMoney=obj.chargeMoney;
                    let createDate=obj.createDate;
                    if (obj.isDel==0) {
                        btnStr = '<a onclick="update(' + id + ')">修改</a>&nbsp;' +
                            '<a onclick="del(' + id + ')">删除</a>&nbsp;' +
                            '<a onclick="info(' + id + ')">查看详情</a>';
                    }else{
                        btnStr='<button name="deleteBtn" class="btn btn-small btn-danger disabled">已删除</button>';
                    }
                    str+='<tr>' +
                        '<td style="vertical-align:middle;">'+id+'</td>' +
                        '<td style="vertical-align:middle;">'+chargeName+'</td>' +
                        '<td style="vertical-align:middle;">'+chargeMoney+'</td>' +
                        '<td style="vertical-align:middle;">'+createDate+'</td>'+
                        '<td style="vertical-align:middle;">'+btnStr+'</td>'
                        +'</tr>';

                    $("#tboby").html(str);
                }
                //填充分页数据
                fillPageData(vo.pageInfo);
            }
        });
    }

</script>
